componentTests
Multi stacked bar Chart – Component test plan
Sub-components: Bar, Legends, Callout
- Bar: bar data, bar variants like ‘part-to-whole’ and ‘absolute-scale’
- Legends: show/hide legends, highlight the corresponding bar on legend hover
- Callout: Default/custom callout
- Screen resolution changes, theme changes
| Test steps | Validation | Tool used |
|---|---|---|
| Test 1: [Snapshot testing] | ||
| - With only data prop, non-empty data | Renders multi stacked bar chart correctly | Enzyme |
| - With empty data | Renders multi stacked bar chart correctly | RTL |
| - With HideLegend prop set to “true” | Should hide legends | Enzyme |
| - With HideTooltip prop set to “true” | Should hide the tooltip in chart | Enzyme |
| - With HideRatio set to “true” | Should not show ratio on top of multi stacked bar chart | Enzyme |
| - With HideDenominator set to “true” | Should not show the denominator for the ratio above the chart | Enzyme |
| - With variant set to “AbsoluteScale” | Should render absolute-scale variant correctly | Enzyme |
| - With variant set to “AbsoluteScale” and “HideLabels” set to “true” | Should not render bar labels in absolute-scale variant | Enzyme |
| Test 2: Basic props testing | ||
| - HideLegend prop set to “false” | Should mount legend when hideLegend is false | Enzyme |
| - HideTooltip prop set to “false” | Should mount callout when hideTootip is false | Enzyme |
| - HideDenominator set to “false” | Should not mount callout | Enzyme |
| - onRenderCalloutPerDataPoint is given | Should render onRenderCalloutPerDataPoint | Enzyme |
| - onRenderCalloutPerDataPoint is not given | Should not render onRenderCalloutPerDataPoint | Enzyme |
| Test 3: Render calling with respective to props | ||
| - No prop changes: Mount multi stacked bar chart and then set the same props again | Render function should have been called twice | Enzyme |
| - Prop changes: Mount multi stacked bar chart and then set the some other prop | Render function should have been called twice | Enzyme |
| Test 4: Mouse events | ||
| - Mouse over on a bar | Should render callout correctly on mouseover | Enzyme |
| - Mouse over on a bar with customized callout | Should render customized callout on mouseover | Enzyme |
| - Mouse move on a bar | Should render callout correctly on mousemove | Enzyme |
| Test 5: Render empty chart aria label div when chart is empty | ||
| - Multi stacked bar chart mounted with non-empty data | No empty chart aria label div rendered | Enzyme |
| - Multi stacked bar chart mounted with empty data | Empty chart aria label div rendered | Enzyme |
| Test 6: [Sub-Component]: Multi stacked bar | ||
| - Specify bar height | Should render the bar with the given height | RTL |
| - With variant set to “PartToWhole” | Should render the variant correctly and for a single bar, the sum of the width of the rectangles should equal to 100%. | RTL |
| - With variant set to “AbsoluteScale” | Should render the variant correctly and for a single bar with the highest width, the sum of the width of the rectangles should equal to 100% and for the rest of the bars, the sum should be < 100%. | RTL |
| - Localize the numbers of the bars with a given culture | Should render the bars with the numbers localized in the given culture | E2E |
| - Specify the href for the multi stacked bar | Should redirect to the Url to upon clicking on the multi stacked bar chart | E2E |
| Test 7: [Sub-Component]: Legends | ||
| - Hover mouse over bar legends | Should reduce the opacity of the other bars and their legends | RTL |
| - Mouse out from a bar legend | Should change the opacity of the other bars and their legends on mouse out action from a bar legend | RTL |
| - Click on a bar legend | Should reduce the opacity of the other bars and their legends on mouse click a bar legend | RTL |
| - Legends overflow scenario | Overflow button should contain the additional legends | E2E |
| - Placeholder data scenario | Should not show any legends when a datapoint is marked as placeholder | RTL |
| Test 8: [Sub-Component]: Callout | ||
| - Hover mouse over a bar | Should call the handler on mouse over bar | RTL |
| - Hover mouse over a bar | Should show the default callout over that bar | RTL |
| - Specify custom callout and hover mouse over a bar | Should show the custom callout over that bar | RTL |
| Test 9: [Sub-Component]: Screen resolution | ||
| - Increase the screen resolution (zoom in) | Should remain unchanged on zoom in | RTL |
| - Decrease the screen resolution (zoom out) | Should remain unchanged on zoom out | RTL |
| Test 10: Theme changed to Dark Theme | Should reflect theme change | RTL |